<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.cube {
			perspective: 500px;
			backface-visibility: hidden;
			transform-style: preserve-3d;
			perspective-origin: 150% 150%;
			  width: 200px;
			  height: 200px;
			  margin: 75px 0 0 75px;
			  border: none;
		}

		.face {
			position: absolute;
			width: 100px;
			height: 100px;
		}

		.front {
			transform: translateZ(50px);
			background: #000;
		}

		.back {
			transform: rotateY(180deg) translateZ(50px);
			background: #333;
		}

		.left {
			transform: rotateY(90deg) translateZ(50px);
			background: #666;
		}

		.right {
			transform: rotateY(-90deg) translateZ(50px);
			background: #999;
		}

		.top {
			transform: rotateX(90deg) translateZ(50px);
			background: #bbb;
		} 

		.bottom {
			transform: rotateX(-90deg) translateZ(50px);
			background: #ddd;
		}

	</style>
</head>
<body>
<div class="cube">
	<div class="face front"></div>
	<div class="face back"></div>
	<div class="face left"></div>
	<div class="face right"></div>
	<div class="face top"></div>
	<div class="face bottom"></div>
</div>
</body>
</html>